<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
    在前面我们会经常提到div是块级元素会独占一行,span是行内级元素会在同一行显示.
    口 到底什么是块级元素,什么是行内级元素呢?
    HTML定义元素类型的思路:
    口 HTML元素有很多,比如h元素/p元素/div元素/span元素/img元素/a元素等等:
    口 当我们把这个元素放到页面上时,这个元素到底占据页面中一行多大的空间呢?
    √为什么我们这里只说一行呢? 因为垂直方向的高度通常是内容决定的;
    口 比如一个h1元素的标题,我们必然是希望它独占一行的,其他的内容不应该和我的标题放在一起:
    口 比如一个p元素的段落,必然也应该独占一行,其他的内容不应该和我的段落放在一起;
    口而类似于img/span/a元素,通常是对内容的某一个细节的特殊描述,没有必要独占一行E
    所以为了区分哪些元素需要独占一行,哪些元素不需要独占一行,
    HTML将元素区分(本质是通过CSS的)成了两类:
    口 块级元素 (block-level elements):独占父元素的一行
    口 行内级元素 (inline-level elements) :多个行内级元素可以在父元素的同一行中显示 
    */

    /* CSS中有个display属性，能修改元素的显示类型，有4个常用值
        口 block: 让元素显示为块级元素
        口 inline: 让元素显示为行内级元素
        口 inline-block: 让元素同时具备行内级、块级元素的特征
        口 none: 隐藏元素 
    */
    /* 元素隐藏方法
        方法一: display设置为none
        元素不显示出来,并且也不占据位置,不占据任何空间(和不存在一样)!
        
        方法二: visibility设置为hidden
        设置为hidden,虽然元素不可见.但是会占据元素应该占批的空间
        默认为visible，元素是可见的

        方法三: rqba设置颜色，将a的值设置为0
        rgba的a设置的是alpha值,可以设置透明度,不影子元素:
        
        方法四: opacity设置透明度,设置为0
        没置整个元素的透明度，会影响所有的子元素 */
    .box{
        height: 100px;
        background-color: red;
        color: aliceblue;
        /* 修改div元素的特性 */
        display: inline;
    }
    a{
        display: block;
    }
</style>
<body>
    <div class="box">
        i am div yuansu
    </div>
    <a href="#">百度一下</a>
    <!--  
        <p>
        aaaa
        <div>123</div>
        bbb
    </p> -->
</body>
</html>